<template>
    <div class="container">
      <i class="el-icon-minus" style="transform:rotate(90deg);position:absolute;z-index: 4;left:1500px;margin-top:-10px"></i>
    <p>推荐视频<a href="#">更多>>></a></p>

    <el-row type="flex" class="row-bg" justify="space-around">
    
  <el-col :span="4" v-for="item in 5" :key="item">
    <div class="grid-content bg-purple">
    <img :src='require("@/assets/second.png")' style="float:left;margin-left:5px;width:110%;height:110%"  alt="图片不见啦">
    <span id="classname">python语言程序设计</span>
    <p id="final">这是一句话视题简介是一句话视题简介是一句话视频简介是一句话视频简介是一句话视须简介</p>
    <p class="normalize">来源:网易公开课</p>
    <span class="normalize">2020-08-07</span>
    <div class="special">
    <span class="normalize">67条评论</span>
    </div>
  </div></el-col>
</el-row>
</div>
</template>
  <script>
  </script>
  
  <style scoped>
.special{
    position:relative;
    display: inline-block;
    margin-right:50px;
    right:-100px;
    z-index:2;
}
.container {
    width:1440px;
    margin:20px auto;
    text-align: left;
    text-indent: 2em;
}
.container p{
  font-size:20px;
    font-weight:bold;
}
.container p a{
  font-size:20px;
    font-weight:normal;
    width:100px;
    margin-left:1200px;
    text-decoration: none;
}
.container p a:hover{
    color:orange;
}
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    /* background-color: #f9fafc; */
  }
  .normalize {
    margin-left: 10px;
    text-indent: 0px;
    font-size:10px;
    color:darkgray;
  }
  .container div p.normalize{
    margin-left: 10px;
    text-indent: 0px;
    font-size:10px;
    color:darkgray;   
;
  }
  div#info{
    overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      word-break: break-all
  }
  #classname{
    font-weight:normal;
    margin-left:-20px;
    text-indent: 0px;
  }
  .container div p#final{
    font-weight:normal;
    margin-left: 10px;
    text-indent: 0px;
    font-size:10px;
    color:darkgray;
    text-overflow: ellipsis;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      word-break: break-all;
      overflow: hidden;
      word-wrap:break-word;
  }
  </style>
  